import React from 'react';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {Flex, Badge} from '@ant-design/react-native';
import Home from '~/pages/home/Home';
import TimeInfo from '~/pages/developer/timeinfo/TimeInfo';
import MyNews from '~/pages/my/mynews/MyNews';
import VideoPark from '~/pages/developer/info/VideoPark';
import {Image, ImageBackground} from 'react-native';
import SelectMy from '~/pages/my/SelectMy';
import store from '~/store';
import {saveSystem} from '~/store/system';

console.disableYellowBox = true; // 关闭全部黄色警告

const TabList = {
    Home: {
        screen: Home,
        navigationOptions: {
            tabBarLabel: '首页',
            tabBarIcon: ({focused}) => {
                if (focused) {
                    return <Image style={{width: 16, height: 16}} source={require('~/assets/navigator/A1.png')} />;
                } else {
                    return <Image style={{width: 16, height: 16}} source={require('~/assets/navigator/1.png')} />;
                }
            },
        },
    },
    TimeInfo: {
        screen: TimeInfo,
        navigationOptions: {
            tabBarLabel: '资讯',
            tabBarIcon: ({focused}) => {
                if (focused) {
                    return <Image style={{width: 16, height: 16}} source={require('~/assets/navigator/A2.png')} />;
                } else {
                    return <Image style={{width: 16, height: 16}} source={require('~/assets/navigator/2.png')} />;
                }
            },
        },
    },
    VideoPark: {
        screen: VideoPark,
        navigationOptions: {
            tabBarIcon: ({focused}) => {
                if (focused) {
                    return (
                        <Flex style={{marginBottom: 20, width: 50, height: 50, borderRadius: 25}} direction={'row'} justify={'center'}>
                            <ImageBackground source={require('~/assets/navigator/circle.png')} style={{width: 50, height: 50}}>
                                <Image style={{width: 40, height: 40, left: 5, top: 5}} source={require('~/assets/navigator/mj.png')} />
                            </ImageBackground>
                        </Flex>
                    );
                } else {
                    return (
                        <Flex style={{marginBottom: 20, width: 50, height: 50, borderRadius: 25}} direction={'row'} justify={'center'}>
                            <ImageBackground source={require('~/assets/navigator/circle.png')} style={{width: 50, height: 50}}>
                                <Image style={{width: 40, height: 40, left: 5, top: 5}} source={require('~/assets/navigator/mj.png')} />
                            </ImageBackground>
                        </Flex>
                    );
                }
            },
        },
    },
    MyInformation: {
        screen: MyNews,
        navigationOptions: ({navigation}) => ({
            tabBarLabel: '消息',
            tabBarIcon: ({focused}) => {
                store.dispatch(saveSystem({msgNav: navigation}));
                const params = navigation.state.params || {};
                let count = params.count || 0;
                if (focused) {
                    return (
                        <Flex align={'start'}>
                            <Image style={{width: 16, height: 16}} source={require('~/assets/navigator/A3.png')} />
                            <Badge size="small" text={count} />
                        </Flex>
                    );
                } else {
                    return (
                        <Flex align={'start'}>
                            <Image style={{width: 16, height: 16}} source={require('~/assets/navigator/3.png')} />
                            <Badge size="small" text={count} />
                        </Flex>
                    );
                }
            },
        }),
    },
    My: {
        screen: SelectMy,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({focused}) => {
                if (focused) {
                    return <Image style={{width: 16, height: 16}} source={require('~/assets/navigator/A4.png')} />;
                } else {
                    return <Image style={{width: 16, height: 16}} source={require('~/assets/navigator/4.png')} />;
                }
            },
        },
    },
};

const tabBarOptions = {
    activeTintColor: '#FF3733',
    inactiveTintColor: '#999999',
    labelStyle: {
        fontSize: 10,
        marginTop: -10,
        marginBottom: 10,
    },
    indicatorStyle: {
        height: 0,
    },
    style: {
        borderTopWidth: 0,
        height: 55,
    },
};

const TabCfg = {
    initialRouteName: 'Home',
    tabBarPosition: 'bottom',
    tabBarOptions,
};

const TabNav = createBottomTabNavigator(TabList, TabCfg);

TabNav.navigationOptions = ({navigation}) => {
    let titleList = ['首页', '资讯', '秘籍', '消息', '我的'];
    let headerShown = navigation.state.index > 0 && navigation.state.index < 4;
    let title = titleList[navigation.state.index];

    const getter = store.getState();
    const obj = navigation.state.routes[2];
    switch (getter.userinfo.identity) {
        case 11:
        case 31:
            obj.params = {title: '卖车位秘籍'};
            break;
        case 8:
        case 21:
            obj.params = {title: '买车位秘籍'};
            break;
    }
    if (navigation.state.index === 2) {
        title = obj.params.title;
    }

    return {
        title,
        headerShown,
    };
};

export default TabNav;
